<!DOCTYPE html>
<html>
<head>
<title>订单结账</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/layer/layer/layer.js"></script>
<style>
    a{text-decoration:none;}
    .row{margin: 4px 0;}
</style>
</head>
<body style="text-align: left;">
<div class="container-fluid" style="max-width: 800px;margin-left: 0;">
    <div class="row">
        <div class="col-3"></div>
        <div class="col-6" style="text-align: center;"><h3>订单结账</h3></div>
        <div class="col-3"></div>
    </div>

    <form method="post" action="/index.php/order/checkout">
        <input type="hidden" id="id" name="id" value="{$order.id}"/>
        <div class="row">
            <div class="col-3">订单流水：</div>
            <div class="col-9"><input type="text" class="form-control" id="order_no" name="order_no" value="{$order.order_no}" disabled /></div>
        </div>
        <div class="row">
            <div class="col-3">订单汇总：</div>
            <div class="col-9"><input type="number" class="form-control" id="price1" name="price1" value="{$order.price1}" disabled /></div>
        </div>
        <div class="row">
            <div class="col-3">折扣选择：</div>
            <div class="col-9">
                <select id="discount" name="discount" class="form-control">
                    {foreach $discount as $kv}
                        <option value="{$kv['value']}" >{$kv['desc']}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        
        <div class="row">
            <div class="col-3">结账金额：</div>
            <div class="col-9"><input type="number" class="form-control" id="price2" name="price2" value="{$order.price1}" /></div>
        </div>
        <div class="row">
            <div class="col-3">结账会员：</div>
            <div class="col-2"><input type="number" class="form-control" id="customer_id" name="customer_id" value="{$order['customer_id']}" readonly /></div>
            {if $order['customer_id']==''}
            <div class="col-5">
                <input class="form-control" type="text" id="nameOrMobile" name="nameOrMobile" placeholder="Enter name or Mobile">
            </div>
            <div class="col-2 text-center">
                <button type="button" class="btn btn-outline-info" id="findCustomer">
                    <span class="bi-search"></span>
                </button>
            </div>
            {else}
            <div col="7" class="text-info"  >会员自助下单</div>
            {/if}
        </div>        
        <div class="row">
            <div class="col-3">支付方式：</div>
            <div class="col-9">
                <select class="form-control" name="payment" id="payment" >
                    {foreach $payment as $k=>$pay}
                        <option value="{$k}">{$pay}</option>
                    {/foreach}
                </select>
            </div>
        </div>        
        <div class="row">
            <div class="col-3">结账备注：</div>
            <div class="col-9"><input type="text" class="form-control" id="checkout_memo" name="checkout_memo" value="{$order.checkout_memo}" /></div>
        </div>
        <div style="text-align: center;margin:10px;">
            <button id="doSubmit" type="button" class="btn btn-primary">
                <span class="bi-cash-coin"></span> 结账
            </button>
            <button type="button" class="btn btn-info btn-printer" oid="{$order['id']}" style="display: none;">
                <span class="bi-printer" >&nbsp;结账单</span>
            </button>            
        </div>
    </form>
    
    <table class="table table-sm table-hover table-striped">
        <thead>
            <th>序号</th>
            <th>项目</th>
            <th>数量</th>
            <th>单价</th>
            <th>小计</th>
        </thead>
        <tbody> 
            {foreach $goods_list as $k=>$kv}
            <tr>
                <td>{$k+1}</td>
                <td>{$kv['name']}</td>
                <td>x{$kv['num']}</td>
                <td>{$kv['price']}</td>
                <td>{$kv['total']}</td>
            </tr>
            {/foreach}
            <tr style="border-top:1px solid #ccc;color:#f60;font-weight: bold;">
                <td></td>
                <td>Total:</td>
                <td>x{$goods_num}</td>
                <td></td>
                <td>{$goods_total}</td>
            </tr>
        </tbody>    
    </table>
</div>

</body>

<script type="text/javascript">
$(document).ready(function(){

    $("#discount").on('change',function(){
        var price = $('#price1').val();
        var num = $("#num").val();
        var price2 = price*$(this).val();
        $("#price2").val(price2.toFixed(2));
    });

    $("#findCustomer").on('click',function(e){
        var name =$("#nameOrMobile").val();

        if(!name) {
            layer.msg('请输入会员名或手机号码！');
            return;
        }
        $.post('/index.php/customer/getOne',{'nameOrMobile':name},function(res){
            console.log(res);
            if(res.code){
                $("#customer_id").val(res.data.id);
            }else{
                $("#customer_id").val('');
            }
            layer.msg(res.msg);
        });
    })

    $("#doSubmit").on('click', function(argument) {
        if($("#price2").val()<=0){
            layer.msg("请输入结账金额！");
            return false;
        }
        //console.log($("#payment").val());
        if($("#payment").val()==''){
            layer.msg("请选择结账方式！");
            return false;
        }        

        //提交的订单
        var order={
            'id':$("#id").val(),
            'price2':$("#price2").val(),
            'discount':$("#discount").val(),
            'customer_id':$("#customer_id").val(),
            'payment':$("#payment").val(),
            'checkout_memo':$("#checkout_memo").val()
        }

        layer.confirm('请确认是否结账！!', {
          btn: ['确认无误，结账！','再检查一下'] //按钮
        }, function(){
            $.ajax({
                type:'post',
                data:order,
                url:'/index.php/order/checkout',
                success:function(res){
                    layer.open({'content':res.msg});
                    if(res.code){
                        $(".btn-printer").show().trigger('click');
                    }

                }
            });

        }, function(){
            layer.msg('取消操作!');
        });
        
    });

    $(".btn-printer").on('click',function(){
        var oid =$(this).attr('oid');
        console.log(oid);
        layer.open({
          type: 2,
          title: '结账单打印',
          shadeClose: true,
          shade: false,
          maxmin: true, //开启最大化最小化按钮
          area: ['400px', '600px'],
          content: '/index.php/order/checkout_print/id/'+oid
        });
    })     
  })

</script>


</body>
</html>
